import React from 'react';
import {
  View,
  Text,
  Button,
  TextInput,
  NativeModules,
  Platform,
  StatusBar,
  StyleSheet,
  TouchableOpacity,
  Dimensions
} from 'react-native';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
import AntDesign from 'react-native-vector-icons/AntDesign';
import Ionicons from 'react-native-vector-icons/Ionicons';

// 安卓状态栏高度
let ANDROID_STATUS_BAR_HEIGHT = 0;
export default class NavigationBar extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      IOS_STATUS_BAR_HEIGHT: 0, // ios状态栏高度
    };
    if (Platform.OS === 'ios') {
      const {StatusBarManager} = NativeModules;
      // 获取 ios 状态栏的高度
      StatusBarManager.getHeight((statusBarHeight) => {
        this.setState({
          IOS_STATUS_BAR_HEIGHT: statusBarHeight.height,
        });
      });
    } else {
      // 获取 android 状态栏的高度
      const statusBarHeight = StatusBar.currentHeight;
      // ANDROID_STATUS_BAR_HEIGHT = parseInt(statusBarHeight);
    }
  }

  render() {
    return (
      <View>
        {/* 在 Android 平台，状态栏默认不是沉浸式的。需要如下操作才能达到沉浸式效果 */}
        {Platform.OS === 'android' ? (
          <StatusBar translucent={true} backgroundColor="#209bf6" />
        ) : null}
        {/* 自定义导航条 */}
        {this.renderMyNavigationBar()}
      </View>
    );
  }

  /**
   * 设置自定义的页面导航条
   * 如果有 headerBackTitle<String> 则不显示输入框
   * 如果有 右侧按钮组件(headerRightButtons<JSX.Element[]>)，输入框宽度自适应
   * headerRightButtons={[
       <TouchableOpacity onPress={() => console.log(123)}>
          <Ionicons name={'ios-copy-outline'} size={24} color={'white'} />
       </TouchableOpacity>,
       otherComponents...
     ]}
   * @returns {JSX.Element}
   */
  renderMyNavigationBar() {
    const {navigation, headerBackTitle,placeholder = '输入关键字查找',headerRightButtons = [],inputChange, inputSearch} = this.props;
    const {IOS_STATUS_BAR_HEIGHT} = this.state;
    const ScreenWidth = Dimensions.get('window').width;
    return (
      <View
        style={[
          {
            marginTop: Platform.OS === 'ios' ? 0 : ANDROID_STATUS_BAR_HEIGHT,
            height: Platform.OS === 'ios' ? IOS_STATUS_BAR_HEIGHT + 60 : 60,
          },
          styles.myNavigationBar,
        ]}>
        <View
          style={[
            {
              marginTop: Platform.OS === 'ios' ? IOS_STATUS_BAR_HEIGHT : 0,
            },
            styles.myNavigationBarContent,
          ]}>
          {/* 左侧返回按钮和文字 */}
            <TouchableOpacity
              activeOpacity={1}
              onPress={() => navigation.goBack()}
              style={{flexDirection: 'row', alignItems: 'center'}}>
              <View style={styles.backIcon}>
                <MaterialIcons
                  name={'arrow-back-ios'}
                  size={20}
                  color={'#333'}
                />
              </View>
            </TouchableOpacity>
          {headerBackTitle ? (
            <Text style={styles.backTitle}>{headerBackTitle}</Text>
          ) : null}
          {/* 中间输入框 */}
          {!headerBackTitle ? (
            <View style={styles.inputBox}>
              <AntDesign name={'search1'} size={20} color={'#b6b6b6'} />
              <TextInput
                style={[{width: headerRightButtons.length > 0 ? ScreenWidth - headerRightButtons.length * 35 - 100 : ScreenWidth - 100}, styles.input]}
                placeholder={placeholder}
                returnKeyType={'search'} // 键盘上的返回键类型，可选的值有 “done”,”go”,”next”,”search”,”send”
                // onChangeText={(text)=>this.textInputValue = text}
                onChangeText={inputChange}
                // onSubmitEditing={() => console.log('search-键盘点击事件')}
                onSubmitEditing={inputSearch}
              />
            </View>
          ) : null}
          {/* 右侧按钮组件 */}
          {headerRightButtons.length > 0 ? <View style={styles.rightButtons}>
            {
              headerRightButtons.map((item, index) => (
                <View style={styles.rightIcon} key={index}>
                  {item}
                </View>
              ))
            }
          </View> : <View style={styles.backIcon} />}
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  myNavigationBar: {
    backgroundColor: '#fff',
  },
  myNavigationBarContent: {
    height: 60,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between'
  },
  backIcon: {
    paddingTop: 10,
    paddingBottom: 10,
    paddingLeft: 15,
    paddingRight: 25,
    flexBasis: 50,
  },
  backTitle: {
    color: '#333',
    fontSize: 20,
  },
  inputBox: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: '#333',
    paddingLeft: 10,
    borderRadius: 3,
  },
  // 输入框样式 290
  input: {
    height: 40,
    fontSize: 16,
    paddingLeft: 10,
    color: '#ccc',
    // color: Platform.OS === 'ios' ? '#ccc' : null
  },
  // 右侧按钮外层的包裹容器
  rightButtons: {
    flexDirection: 'row',
    alignItems: 'center',
    marginLeft: 10,
    marginRight: 15,
  },
  // 右侧的每个按钮
  rightIcon: {
    paddingLeft: 5,
    paddingRight: 5
  }
});
